<script setup>

import {onMounted} from "vue";
import axios from "axios";

const toStart = () => {
  window.location.href = '/select'
}

const toIndex = (index) => {
  window.location.href = ['/select', '/promote', '/operate', '/service'][index]
}

onMounted(() => {
  axios.get('/api/data').then(res => {
    console.log(res)
  })
})

</script>

<template>
  <div class="w-full flex flex-col items-center justify-center">
    <div class="h-8"></div>
    <img style="width: 800px;" class="" src="../../assets/img/home/home_intro.svg" alt="">
    <div class="h-12"></div>
    <div class="flex font-bold select-none">
      <div @click="toStart"
           class="hover:shadow-2xl transition w-48 h-14 cursor-pointer rounded-xl text-white bg-black flex justify-center items-center">
        立即开始
      </div>
      <div class="w-3"></div>
      <div
          class="hover:shadow-2xl transition w-48 h-14 cursor-pointer rounded-xl bg-gray-200 flex justify-center items-center">
        使用手册
      </div>
    </div>
    <div class="h-24"></div>
    <img style="width: 800px;" class="" src="../../assets/img/home/home_intro_txt.svg" alt="">
    <div class="h-8"></div>
    <div class="">
      <div class="flex">
        <img class="w-80 rounded-2xl shadow-sm transition hover:shadow-2xl cursor-pointer"
             src="../../assets/img/home/step_1.svg" @click="toIndex(0)" alt="">
        <div class="w-8"></div>
        <img class="w-80 rounded-2xl shadow-sm transition hover:shadow-2xl cursor-pointer"
             src="../../assets/img/home/step_2.svg" @click="toIndex(1)" alt="">
      </div>
      <div class="h-8"></div>
      <div class="flex">
        <img class="w-80 rounded-2xl shadow-sm transition hover:shadow-2xl cursor-pointer"
             src="../../assets/img/home/step_3.svg" @click="toIndex(2)" alt="">
        <div class="w-8"></div>
        <img class="w-80 rounded-2xl shadow-sm transition hover:shadow-2xl cursor-pointer"
             src="../../assets/img/home/step_4.svg" @click="toIndex(3)" alt="">
      </div>
    </div>
    <div class="h-24"></div>
    <div class="text-gray-400">@灵帆AI智能体-跨境电商全流程解决方案</div>
    <div class="h-24"></div>
  </div>
</template>

<style scoped>

</style>